<template>
  <view>
    <view class="full" @click="closeFull"></view>
    <view class="login-out">
      <!-- <view>
				<u-cell-item
					required
					title="所在机构:"
					:value="searchForm.orgName || ''"
					@click="showData('org')"
				/> -->
      <!-- <ljs-treeChoose
					v-if="show.org"
					:data="orgList"
					@getChooseValue="(val, items) => changeSelect(items, 'org')"
					@close="handleCancel('org')"
				/> -->
      <!-- <ba-tree-picker ref="treePickerorg" title="选择" :localdata="orgList" valueKey="id" textKey="label" childrenKey="children"
				 :multiple='false' :selectedData="searchForm.selectedOrg" @select-change="(val, items) => changeSelectTree(val, items, 'org')" />
			</view> -->
      <view>
        <u-cell-item
          required
          title="线路:"
          :value="searchForm.lineName || ''"
          @click="showData('line')"
        />
        <ba-tree-picker
          ref="treePickerline"
          title="选择"
          :localdata="lineList"
          valueKey="idK"
          textKey="name"
          childrenKey="children"
          :multiple="true"
          :selectedData="searchForm.selectedLine"
          @select-change="
            (idArr, names) => changeSelectTree(idArr, names, 'line')
          "
        />
        <!-- <u-select
					v-model="show.line"
					:list="lineList"
					label-name="name"
					value-name="idK"
					@confirm="(val) => changeSelect(val, 'line')"
					@cancel="handleCancel('line')"
				></u-select> -->
      </view>
      <view>
        <u-cell-item
          required
          title="专业:"
          :value="searchForm.majorName || ''"
          @click="showData('major')"
        />
        <ba-tree-picker
          ref="treePickermajor"
          title="选择"
          :localdata="majorAllList"
          valueKey="code"
          textKey="value"
          childrenKey="children"
          :multiple="true"
          :selectedData="searchForm.selectedMajor"
          @select-change="
            (codeArr, names) => changeSelectTree(codeArr, names, 'major')
          "
        />
        <!-- <u-select
					v-model="show.major"
					:list="majorList"
					label-name="value"
					value-name="code"
					@confirm="(val) => changeSelect(val, 'major')"
					@cancel="handleCancel('major')"
				></u-select> -->
      </view>
      <view>
        <!-- <view @click="show.station = true">
				区间战场：
				<text class="text-load">{{ searchForm.stationName }}</text>
				</view> -->
        <u-cell-item
          required
          title="位置:"
          :value="searchForm.stationName || ''"
          @click="show.station = true"
        />
        <u-select
          v-model="show.station"
          :list="stationList"
          label-name="name"
          value-name="code"
          @confirm="(val) => changeSelect(val, 'station')"
          @cancel="handleCancel('station')"
        ></u-select>
      </view>
      <view :class="{ disabled: tabId == 1 }">
        <!-- <view @click="showData('equType')">
				设备类型：
				<text class="text-load">{{ searchForm.equTypeName }}</text>
				</view> -->
        <u-cell-item
          required
          title="设备类型:"
          :value="searchForm.equTypeName || ''"
          @click="showData('equType')"
        />
        <ba-tree-picker
          ref="treePickerequType"
          title="选择"
          :localdata="equTypeList"
          valueKey="id"
          textKey="label"
          childrenKey="children"
          :multiple="false"
          :selectedData="searchForm.selectedEquType"
          @select-change="
            (idList, names) => changeSelectTree(idList, names, 'equType')
          "
        />
        <!-- <ljs-treeChoose
					v-if="show.equType"
					:data="equTypeList"
					@getChooseValue="(val, items) => changeSelect(items, 'equType')"
					@close="handleCancel('equType')"
				/> -->
      </view>
      <view>
        <!-- <view @click="show.equ = true">
				设备：
				<text class="text-load">{{ searchForm.equName }}</text>
				</view> -->
        <u-cell-item
          required
          title="设备:"
          :value="searchForm.equName || ''"
          @click="show.equ = true"
        />
        <u-select
          v-model="show.equ"
          :list="equList"
          label-name="text"
          value-name="mmsequid"
          @confirm="(val) => changeSelect(val, 'equ')"
          @cancel="handleCancel('equ')"
        ></u-select>
      </view>
      <!-- <view v-if="tabId == 0">
				<u-cell-item
					required
					title="开始时间:"
					:value="searchForm.startTime || ''"
					@click="show.startTime = true"
				/>
				<u-picker
					v-model="show.startTime"
					mode="time"
					:params="timeParams"
					@confirm="(val) => changeSelect(val, 'startTime')"
					@cancel="handleCancel('startTime')"
				></u-picker>
			</view>
			<view v-if="tabId == 0">
				<u-cell-item
					required
					title="结束时间:"
					:value="searchForm.endTime || ''"
					@click="show.endTime = true"
				/>
				<u-picker
					v-model="show.endTime"
					mode="time"
					:params="timeParams"
					@confirm="(val) => changeSelect(val, 'endTime')"
					@cancel="handleCancel('endTime')"
				></u-picker>
			</view> -->
      <!-- <view v-if="tabId == 1"> -->
      <!-- <view class="date-box" @click="show.curveDate = true">
				日期： {{ searchForm.curveDate }}
				<view class="fr">
					<image class="icon-date" src="/static/img/date-icon.png"></image>
				</view>
				<view class="full full2" v-show="show.curveDate"></view>
				<u-picker
					v-model="show.curveDate"
					mode="time"
					:params="dateParams"
					@confirm="(val) => changeSelect(val, 'curveDate')"
					@cancel="handleCancel('curveDate')"
				></u-picker>
				</view> -->
      <!-- <u-cell-item
					required
					title="日期:"
					:value="searchForm.curveDate || ''"
					@click="show.curveDate = true"
				/>
				<u-picker
					v-model="show.curveDate"
					mode="time"
					:params="dateParams"
					@confirm="(val) => changeSelect(val, 'curveDate')"
					@cancel="handleCancel('curveDate')"
				></u-picker>
			</view> -->
      <!-- <view v-if="tabId == 1"> -->
      <!-- <view class="work-date" @click="show.curveTime = true">
					曲线时间：
					<text class="text-load">{{ searchForm.curveTime }}</text>
					<u-select
						v-model="show.curveTime"
						:list="curveTimeList"
						label-name="label"
						value-name="label"
						@confirm="(val) => changeSelect(val, 'curveTime')"
						@cancel="handleCancel('curveTime')"
					></u-select>
				</view> -->
      <!-- <u-cell-item
					required
					title="曲线时间:"
					:value="searchForm.curveTime || ''"
					@click="show.curveTime = true"
				/>
				<u-select
					v-model="show.curveTime"
					:list="curveTimeList"
					label-name="label"
					value-name="label"
					@confirm="(val) => changeSelect(val, 'curveTime')"
					@cancel="handleCancel('curveTime')"
				></u-select>
			</view> -->
      <view class="btn">
        <button class="cancel-btn" @click="closeFull">
          <b>取消</b>
        </button>
        <button class="default-btn fr" @click="handleSearh">
          <b>确定</b>
        </button>
      </view>
    </view>
  </view>
</template>
<script>
import {
  ORGCONTROLLER,
  STATIONCONTROLLER,
  LINECONTROLLER,
} from "../../api/sys";
import { TYPECONTROLLER, EQUCONTROLLER } from "../../api/eqt";
import { T5_DATA_CONTROLLER } from "../../api/t5";

import dayjs from "../../static/plugins/js/dayjs/dayjs.min.js";
import { mapState } from "vuex";

export default {
  props: {
    tabId: {
      type: Number,
      default: 0,
    },
    show_search: {
      type: Boolean,
      default: false,
    },
    searchInfo: {
      type: Object,
      default: () => {
        return {
          lineName: "",
          lineId: "",
          majorName: "",
          majorCode: "",
          stationName: "",
          stationCode: "",
          equTypeName: "",
          equTypeId: "",
          equName: "",
          equId: "",
        };
      },
    },
  },
  data() {
    return {
      show: {
        org: false,
        station: false,
        // line: false,
        equType: false,
        equ: false,
        curveDate: false,
        curveTime: false,
        startTime: false,
        endTime: false,
        line: false,
        major: false,
      },
      searchForm: {
        // orgName: "",
        // orgId: "",
        lineName: "",
        lineId: "",
        majorName: "",
        majorCode: "",
        stationName: "",
        stationCode: "",
        lineName: "",
        lineId: "",
        equTypeName: "",
        equTypeId: "",
        equName: "",
        equId: "",
        // curveDate: "",
        // curveTime: "",
        // startTime: "",
        // endTime: "",
        selectedOrg: [],
        selectedLine: [],
        selectedMajor: [],
        selectedEquType: [],
      },
      orgData: [],
      orgList: [],
      lineList: [],
      stationList: [],
      equTypeData: [],
      equTypeList: [],
      equList: [],
      majorList: [],
      dateParams: {
        year: true,
        month: true,
        day: true,
      },
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      curveTimeList: [],
      searchObj: {
        showInfoAnalog: {},
        searchInfoAnalog: {},
        showInfoCurve: {},
        searchInfoCurve: {},
      },
      equTypeDefaultCurve: {
        equTypeId: 9,
        equTypeCode: "S0104",
        equTypeName: "道岔",
      },
      loginInfo: {},
      isMock: false,
			majorAllList: [],
    };
  },
  computed: {
    ...mapState(["workProfession", "lineTree", "reeByOrgnum"]),
  },
  watch: {
    show_search(val) {
      if (val) {
        console.log("新值", this.searchInfo);
        this.searchForm = { ...this.searchInfo };
				if (!this.searchInfo.majorName) this.setMajorVal();
        if (this.tabId == 1) {
          this.changeSelectTree(
            [this.equTypeDefaultCurve.equTypeId],
            this.equTypeDefaultCurve.equTypeName,
            "equType"
          );
        }
				if (this.lineList.length) {
					let selectedObj = {
						id: this.lineList[0].idK,
						label: this.lineList[0].name,
						selectedId: [this.lineList[0].idK],
					};
					this.changeSelect(selectedObj, "line");
				}
      }
    },
  },
  mounted() {
    this.loginInfo = { ...this.$store.state.userInfo };
    this.$nextTick(() => {
      this.getOrgList();
    });
  },
  methods: {
		setMajorVal() {
			// 通过登录人专业过滤
			console.log(this.loginInfo, 'loginInfo');
			console.log(this.workProfession, 'workProfession');
			let majorCode =
				this.loginInfo &&
				this.loginInfo.roles &&
				this.loginInfo.roles[0] &&
				this.loginInfo.roles[0].major;
			let majorCodeArr = majorCode?.split(",") || [];
			this.majorList = this.workProfession.filter((item) =>
				majorCodeArr.some((code) => code == item.code)
			);
			// this.majorAllList = [{ code: "all", value: "全部"}];
			this.majorAllList = [];
			this.majorAllList = this.majorAllList.concat(this.majorList);
			let majorName = this.majorList.map((item) => item.value).join(",");
			this.changeSelectTree(majorCodeArr, majorName, "major");
		},
		// 获取机构数据
		async getOrgList() {
			this.orgData = [];
			const resData = await this.fetch(
				"get",
				this.$store.state.baseUrl + ORGCONTROLLER.ALLORGS
			);
			this.orgData = (resData && resData.data) || [];
			this.orgList = this.orgData.map((item) => this.mapTree(item));
			this.lineList = this.lineTree;
		},
		showData(type) {
			if (
				type == "org" ||
				type == "equType" ||
				type == "line" ||
				type == "major"
			) {
				if (this.tabId == 1 && type == "equType") return false;
				this.$refs[`treePicker${type}`]._show();
			} else {
				this.show[type] = true;
			}
		},
		mapTree(item) {
			let haveChildren =
				Array.isArray(item.children) && item.children.length > 0;
			return {
				id: item.orgnum,
				label: item.text,
				openTag: false,
				choose: false,
				children: haveChildren ? item.children.map((i) => this.mapTree(i)) : [],
			};
		},
		mapTreeEquType(item) {
			let haveChildren =
				Array.isArray(item.children) && item.children.length > 0;
			return {
				id: item.id,
				label: item.text,
				openTag: false,
				choose: false,
				children: haveChildren ?
					item.children.map((i) => this.mapTreeEquType(i)) : [],
			};
		},
		changeSelectTree(idArr, nameStr, type) {
			if (idArr.length && nameStr && type == "major") {
				if (idArr.includes("all")) idArr = this.majorList.map((item) => item.code);
				if (nameStr.includes("全部")) nameStr = this.majorList.map((item) => item.value).join(",");
			}
			let data = {
				id: (idArr && idArr.join(",")) || "",
				label: nameStr || "",
				selectedId: idArr,
			};
			this.changeSelect(data, type);
		},
		changeSelect(val, type) {
			console.log(val, type, "changeSelect");
			if (!val) return false;
			if (this.show[type]) this.show[type] = false;
			if (type == "org") {
				// console.log(val, "org");
				// this.searchForm.orgName = val[val.length - 1].label;
				// this.searchForm.orgId = val[val.length - 1].id;
				this.searchForm.orgName = val.label;
				this.searchForm.orgId = val.id;
				this.searchForm.selectedOrg = val.selectedId;
				// this.getStationList();
			} else if (type == "line") {
				// this.searchForm.lineName = val[0] && val[0].label || "";
				// this.searchForm.lineId = val[0] && val[0].value || "";
				this.searchForm.lineName = val.label;
				this.searchForm.lineId = val.id;
				this.searchForm.selectedLine = val.selectedId;
				this.getStationList();
			} else if (type == "major") {
				// this.searchForm.majorName = val[0] && val[0].label || "";
				// this.searchForm.majorCode = val[0] && val[0].value || "";
				this.searchForm.majorName = val.label;
				this.searchForm.majorCode = val.id;
				this.searchForm.selectedMajor = val.selectedId;
				// this.getStationList();
			} else if (type == "station") {
				this.searchForm.stationName = (val[0] && val[0].label) || "";
				this.searchForm.stationCode = (val[0] && val[0].value) || "";
				// this.getCurveTime();
				if (this.tabId == 0) {
					this.getEquTypeList();
				} else if (this.tabId == 1) {
					this.getEquList();
				}
			} else if (type == "equType") {
				// this.searchForm.equTypeName = val[val.length - 1].label;
				// this.searchForm.equTypeId = val[val.length - 1].id;
				this.searchForm.equTypeName = val.label;
				this.searchForm.equTypeId = val.id;
				this.searchForm.selectedEquType = val.selectedId;
				this.getEquList();
			} else if (type == "equ") {
				this.searchForm.equName = (val[0] && val[0].label) || "";
				this.searchForm.equId = (val[0] && val[0].value) || "";
				// this.getCurveTime();
			} else if (type == "curveDate") {
				this.searchForm.curveDate = `${val.year}-${val.month}-${val.day}`;
				this.getCurveTime();
			} else if (type == "curveTime") {
				this.searchForm.curveTime = (val[0] && val[0].label) || "";
			} else if (type == "startTime") {
				this.searchForm.startTime = `${val.year}-${val.month}-${val.day} ${val.hour}:${val.minute}:${val.second}`;
			} else if (type == "endTime") {
				this.searchForm.endTime = `${val.year}-${val.month}-${val.day} ${val.hour}:${val.minute}:${val.second}`;
			}
		},
		getCurveTime() {
			this.curveTimeList = [];
			this.curveTime = "";
			let date = this.searchForm.curveDate;
			let timeS =
				(date && dayjs(date).startOf("day").format("YYYY-MM-DD HH:mm:ss")) ||
				"";
			let timeE =
				(date && dayjs(date).endOf("day").format("YYYY-MM-DD HH:mm:ss")) || "";
			let params = {
				beginTime: timeS,
				endTime: timeE,
				equID: this.searchForm.equId || "",
				dbm: this.searchForm.stationCode || "",
			};
			// params = {
			//   // beginTime: "2023-12-23 1:00:00",
			//   // endTime: "2023-12-23 23:59:59",
			//   equID: "201#J[103][CBZ][道岔#ZYJ7]",
			//   dbm: "CBZ",
			// };
			console.log(params, "getCurveTime params");
			let serverObj = this.$store.state.appServer;
			if (serverObj && serverObj.csIp && serverObj.csPort) {
				let baseUrl = `http://${serverObj.csIp}:${serverObj.csPort}`;
				this.fetch(
					"GET",
					baseUrl + T5_DATA_CONTROLLER.GET_CURVE_DATA_BEGIN_TIME,
					params
				).then((res) => {
					console.log(res, "getCurveTime res");
					if (res && res.code == "200") {
						this.curveTimeList =
							(res.data &&
								res.data.map((timeItem) => {
									return {
										label: dayjs(timeItem).format("HH:mm:ss"),
									};
								})) || [];
						// if (this.curveTimeList.length) this.curveTime = this.curveTimeList[0];
					} else {
						console.error("接口报错");
					}
				});
			}
		},
		// 获取车站数据
		async getStationList() {
			this.stationList = [];
			let params = {
				orgId: this.loginInfo && this.loginInfo.org && this.loginInfo.org.idK, // this.searchForm.orgId
				lineId: this.searchForm.lineId,
				// major: this.searchForm.majorCode,
				type: "车站",
			};
			const resData = await this.fetch(
				"get",
				// this.$store.state.baseUrl + STATIONCONTROLLER.GET_STATION_BY_ORGID,
				this.$store.state.baseUrl + STATIONCONTROLLER.GET_STATION_BY_LINE_ID_TYPE,
				params
			);
			if (resData.returnCode == "2004") {
				this.stationList = resData.data;
				if (this.stationList.length == 1) {
					let selectData = [{
						value: this.stationList[0].code,
						label: this.stationList[0].name,
					}]
					this.changeSelect(selectData, "station")
				}
			} else {
				console.error("接口报错");
			}
		},
		// 获取设备类型数据
		getEquTypeList() {
			this.equTypeData = [];
			let params = {
				vtype: "1E",
				stationCode: this.searchForm.stationCode,
			};
			if (this.tabId == 0) params.inputType = "1";
			this.fetch(
				"GET",
				this.$store.state.baseUrl + TYPECONTROLLER.EQUTYPETREE,
				params
			).then((res) => {
				if (res.returnCode == "2004") {
					this.equTypeData = res.data;
					this.equTypeList = this.equTypeData.map((item) =>
						this.mapTreeEquType(item)
					);
				} else {
					console.error("接口报错");
				}
			});
		},
		getEquList() {
			this.equList = [];
			if (!this.searchForm.stationCode || !this.searchForm.equTypeId) return false;
			let params = {};
			params = {
				equTypeLike: "",
				personId: this.loginInfo && this.loginInfo.id,
				roleCode: this.loginInfo && this.loginInfo.roles && this.loginInfo.roles[0] && this.loginInfo.roles[0].code,
				page: 1,
				size: 99999,
				orgOrStation: this.searchForm.stationCode,
			};
			if (this.tabId == 0) {
				params = {
					...params,
					// station: this.searchForm.stationCode,
					// equtype: this.searchForm.equTypeId,
					equTypeLike: this.searchForm.equTypeId,
				};
				// this.fetch(
				//   "GET",
				//   this.$store.state.baseUrl + EQUCONTROLLER.GET_EQU_NAME,
				//   params
				// ).then((res) => {
				//   if (res.returnCode == "2004") {
				//     this.equList = res.data;
				//   } else {
				//     console.error("接口报错");
				//   }
				// });
			} else if (this.tabId == 1) {
				params = {
					// equTypeCode: this.equTypeDefaultCurve.equTypeCode,
					// page: 1,
					// size: 99999
					...params,
					equTypeLike: this.equTypeDefaultCurve.equTypeId,
				}
			}
			console.log(params, 'getEquList params');
			this.fetch(
				"POST",
				this.$store.state.baseUrl + EQUCONTROLLER.GET_EQU_LIST,
				params
			).then((res) => {
				if (res.returnCode == "2004") {
					this.equList = res.data && res.data.content && res.data.content.map((item) => {
						return {
							...item,
							text: item.equname,
						}
					}) || [];
				} else {
					console.error("接口报错");
				}
			});
		},
		handleCancel(type) {
			if (this.show[type]) {
				this.show[type] = false;
			}
		},
		handleSearh() {
			if (
				// !this.searchForm.orgName ||
				!this.searchForm.lineName ||
				!this.searchForm.majorName ||
				!this.searchForm.stationName ||
				!this.searchForm.equTypeName ||
				!this.searchForm.equName
			) {
				uni.showToast({
					title: "请填写必填项",
					icon: "none"
				});
				if (!this.isMock) return false;
			}
			// var beginTimeVal = "";
			// var endTimeVal = "";
			// if (this.tabId == 0) {
			// 	if (!this.searchForm.startTime || !this.searchForm.endTime) {
			// 		// uni.showToast({ title: "请填写必填项", icon: "none" });
			// 		// return false;
			// 	}
			// 	beginTimeVal = this.searchForm.startTime;
			// 	endTimeVal = this.searchForm.endTime;
			// } else if (this.tabId == 1) {
			// 	if (!this.searchForm.curveDate || !this.searchForm.curveTime) {
			// 		// uni.showToast({ title: "请填写必填项", icon: "none" });
			// 		// return false;
			// 	}
			// 	beginTimeVal = this.searchForm.curveDate + " " + this.searchForm.curveTime;
			// 	endTimeVal = "";
			// }
			let params = {
				// beginTime: beginTimeVal,
				// endTime: endTimeVal,
				equID: this.searchForm.equId || "",
				dbm: this.searchForm.stationCode || "",
				showInfo: {
					lineName: this.searchForm.lineName,
					stationName: this.searchForm.stationName,
					equTypeName: this.searchForm.equTypeName,
					equName: this.searchForm.equName,
				},
				searchInfo: {
					lineName: this.searchForm.lineName,
					lineId: this.searchForm.lineId,
					selectedLine: this.searchForm.selectedLine,
					majorName: this.searchForm.majorName,
					majorCode: this.searchForm.majorCode,
					selectedMajor: this.searchForm.selectedMajor,
					stationName: this.searchForm.stationName,
					stationCode: this.searchForm.stationCode,
					equTypeName: this.searchForm.equTypeName,
					equTypeId: this.searchForm.equTypeId,
					selectedEquType: this.searchForm.selectedEquType,
					equName: this.searchForm.equName,
					equId: this.searchForm.equId,
					equID: this.searchForm.equId,
				},
				showInfoAnalog: {},
				showInfoCurve: {},
				searchInfoAnalog: {
					selectedOrg: [],
					selectedLine: [],
					selectedMajor: [],
					selectedEquType: [],
				},
				searchInfoCurve: {
					selectedOrg: [],
					selectedLine: [],
					selectedMajor: [],
					selectedEquType: [],
				},
			};
			console.log("tabId", this.tabId);
			if (this.tabId == 0) {
				params.showInfoAnalog = this.searchObj.showInfoAnalog = {
					...params.showInfo,
				};
				params.searchInfoAnalog = this.searchObj.searchInfoAnalog = {
					...params.searchInfo,
				};
				params.showInfoCurve = this.searchObj.showInfoCurve;
				params.searchInfoCurve = this.searchObj.searchInfoCurve;
			} else if (this.tabId == 1) {
				params.showInfoCurve = {
					...params.showInfo
				};
				params.searchInfoCurve = {
					...params.searchInfo
				};
				params.showInfoAnalog = this.searchObj.showInfoCurve =
					this.searchObj.showInfoAnalog;
				params.searchInfoAnalog = this.searchObj.searchInfoCurve =
					this.searchObj.searchInfoAnalog;
			}
			// console.log("showInfoAnalog", params.showInfoAnalog);
			// console.log("searchInfoAnalog", params.searchInfoAnalog);
			// console.log("showInfoCurve", params.showInfoCurve);
			// console.log("searchInfoCurve", params.searchInfoCurve);
			// params = {
			// 	...params,
			//   // beginTime: "2023-12-28 09:14:56",
			//   // endTime: "2023-12-29 09:14:56",
			//   beginTime: "2024-01-09 00:00:00",
			//   endTime: "2024-01-09 23:59:59",
			//   equID: "201#J[103][CBZ][道岔#ZYJ7]",
			//   dbm: "CBZ",
			// };
			this.$emit("handleSearh", params);
		},
		closeFull() {
			this.$emit("closeFull");
		},
  },
};
</script>
<style scoped lang="less">
.login-out {
  padding: 40px 0 0 20px;
  > view {
    color: #3e3a39;
    margin-bottom: 16px;
    &.disabled {
      background: #eee;
    }
  }
}
/deep/ .u-cell--required:before {
  left: 2px;
}
/deep/ .u-cell {
  padding: 5px 10px;
  .u-cell_title {
    padding-left: 10px;
  }
}
.date-box {
  line-height: 50px;
  border-bottom: 1px solid #d7d7d7;
  color: #3e3a39;
  font-size: 14px;
  padding-right: 27px;
  .icon-date {
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }
}
.btn {
  position: absolute;
  width: 100%;
  bottom: 5%;
  left: 0;
  padding: 0 15px;
  .default-btn,
  .cancel-btn {
    width: 47%;
    display: inline-block;
  }
}
</style>
